<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <!-- GrowingIO Analytics code version 2.1 -->
    <!-- Copyright 2015-2018 GrowingIO, Inc. More info available at http://www.growingio.com -->

    <!-- growingio 接入的 sdk -->
    <script type="text/javascript">
      !(function (e, t, n, g, i) {
        (e[i] =
          e[i] ||
          function () {
            (e[i].q = e[i].q || []).push(arguments);
          }),
          (n = t.createElement('script')),
          (tag = t.getElementsByTagName('script')[0]),
          (n.async = 1),
          (n.src =
            ('https:' == document.location.protocol ? 'https://' : 'http://') +
            g),
          tag.parentNode.insertBefore(n, tag);
      })(window, document, 'script', 'assets.giocdn.com/2.1/gio.js', 'gio');
      gio('init', 'a6555f47a55b8fcb', {});

      //custom page code begin here

      //custom page code end here

      gio('send');
    </script>

    <!-- End GrowingIO Analytics code version: 2.1 -->
  </head>
  <script>
    // 示例一
    // var pathConfigFromServer = {
    //   xPath: `id("container")/div[0]/div[0]/p[2]`,
    //   dataPathList: [`child/state/list/1/count`],
    // };

    // 示例二
    var pathConfigFromServer = {
      xPath: `id("container")/div[0]/div[0]/p`,
      dataPathList: [`child/state/list/*/price`, `child/state/list/*/count`],
    };
  </script>
  <body>
    <!-- <script src="/react.development.js"></script>
    <script src="/react-dom.development.js"></script>
    <script src="/babel.js"></script>
    <script src="/track-sdk.js"></script> -->
    <script src="./react.development.js"></script>
    <script src="./react-dom.development.js"></script>
    <script src="./babel.js"></script>

    <div id="container"></div>
    <script type="text/babel">
      const { memo, useState, useEffect, useMemo, useReducer } = React;
      /**
       * webapp 拷过来的 useParams
       * */
      const useParams = (initParams) => {
        const paramsReducer = (state, action) => {
          switch (action.type) {
            case 'reset': {
              const resetParams = action.payload || initParams;
              return {
                ...resetParams,
              };
            }
            case 'delete': {
              const deleteKeys = action.payload;
              const deleteKeyMap = {};
              deleteKeys.forEach((key) => (deleteKeyMap[key] = true));
              const newState = {};

              Object.keys(state).forEach((key) => {
                if (deleteKeyMap[key]) return;
                newState[key] = state[key];
              });
              return newState;
            }
            case 'update': {
              const newParams = action.payload;
              return {
                ...state,
                ...newParams,
              };
            }
            default:
              throw new Error();
          }
        };
        const [params, dispatchParams] = useReducer(paramsReducer, initParams);
        const updateParams = (params) => {
          dispatchParams({
            type: 'update',
            payload: params,
          });
        };
        return [params, updateParams, dispatchParams];
      };

      /**
       * App 组件
       * */
      class App extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            name: 'qhw',
          };
        }
        clickMe = () => {
          console.log('click app');
          this.setState({
            name: 'qhw11',
          });
        };
        render() {
          return (
            <div>
              当前是 APP 组件：
              <p onClick={this.clickMe}>{this.state.name}</p>
              <Child></Child>
            </div>
          );
        }
      }

      /**
       * Child 组件
       * */
      const Child = (props) => {
        const [params, setParams] = useParams({
          list: [],
          isMe: false,
        });

        const [a, seta] = useState(false);
        const [b, setb] = useState(2);

        useEffect(() => {
          // 模拟异步接口请求
          setTimeout(() => {
            setParams({
              list: new Array(10).fill(1).map((item, index) => {
                return {
                  name: '商品第' + index + '项',
                  id: index,
                  price: index * 4,
                  count: index * 2,
                };
              }),
            });
          }, 1000);
        }, []);

        const clickHandle = (name) => {};

        return (
          <div>
            当前是 Child 组件：{params.isMe}
            {params.list.map((item) => {
              return (
                <p
                  key={item.id}
                  onClick={() => {
                    console.log('click child');
                    clickHandle(item.name);
                  }}
                >
                  {item.name}
                </p>
              );
            })}
          </div>
        );
      };

      ReactDOM.render(<App />, document.getElementById('container'));
    </script>
    <script src="./track-sdk.js"></script>
  </body>
</html>
